import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import AudioPlayer from '../../ch/components/AudioPlayer.vue'
import Accordion from '../../ch/components/Accordion.vue'
import AccordionItem from '../../ch/components/AccordionItem.vue'
import TranscriptionExample from '../../ch/demo/TranscriptionExample.vue'

<Meta
  title="Components/AudioPlayer"
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { AudioPlayer, Accordion, AccordionItem, TranscriptionExample },
  template: `
    <div>
      <AudioPlayer
        :url="url"
        :title="title"
        :description="description"
        :type="type"
        :copyright="copyright"
      />
      <Accordion v-if="displayTranscript" id="1" spaced>
        <AccordionItem
          id="10"
          title="Transcript"
        >
          <TranscriptionExample />
        </AccordionItem>
      </Accordion>
    </div>
    `
})


# Audio player

<Canvas>
  <Story
    name="Example"
    args={{
      title: "First of August speech",
      description: "Hier kommt ein Kurzbeschriebund so weiter Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.",
      copyright: "Reuters",
      url: "https://www.admin.ch/dam/gov/de/Dokumentation/Reden/1-August/DE.MP3",
      type: "audio/mp3",
      displayTranscript: false,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

Use the default `<audio>` element to play audio documents. Every `<audio>` element should be wrapped into a `div.auto-player` element, to keep consistent styling.

<a href="?path=/story/components-audioplayer--example">
  Go to the Canvas Tab
</a>

---
<a href="?id=components-audioplayer--example&args=&viewMode=story" target="_blank">
  Open page in full width in a new tab
</a>


# Transcript

<Canvas>
  <Story
    name="Transcript"
    args={{
      title: "First of August speech",
      description: "Hier kommt ein Kurzbeschriebund so weiter Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.",
      copyright: "Reuters",
      url: "https://www.admin.ch/dam/gov/de/Dokumentation/Reden/1-August/DE.MP3",
      type: "audio/mp3",
      displayTranscript: true,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>


